<template>
    <h3>双向数据绑定</h3>
    <div>
        <input v-model="message" placeholder="输入一些文本" />
        <!-- v-model 指令将输入框的内容双向绑定到 data 中的 message 属性 -->
        <p>你输入了：{{ message }}</p>
        <!-- {{ }} 语法将 data 中的 message 属性绑定到页面上 -->
    </div>

    <h3>事件处理</h3>
    <div>
        <button v-on:click="increment">点击我</button>
        <p>点击次数：{{ count }}</p>
    </div>

    <h3>计算属性</h3>
    <div>
        <p>原始金额：{{ amount }}</p>
        <p>税后金额：{{ computedAmount }}</p>
    </div>
</template>

<script>
// 定义组件的选项对象
export default {
    // data 是一个函数，它返回一个对象，对象中包含组件的状态
    // 这里的 message 属性用来存储输入框的内容
    data() {
        return {
            message: '',
            count: 0,
            amount: 100
        };
    },
    // 定义 methods 属性，用来定义组件的方法
    methods: {
        // 定义 increment 方法，用来增加点击次数
        increment() {
            this.count++;
        },
    },
    // 定义 computed 属性，用来计算税后金额
    computed: {
        // 定义 computedAmount 方法，用来计算税后金额
        computedAmount() {
            return this.amount * 1.1; // 假设税率为10%
        }
    }

};
</script>
<style>
h3 {
    color: rgb(0, 145, 255);
}
</style>